import { useState, useEffect, useContext } from 'react'
import PubSub from 'pubsub-js';
import useBusinessMap from '../../../../../common/BusinessMap/useBusinessMap';
import DarkCard from '../../../../../common/DarkCard';
import { Button, Descriptions, Divider } from 'antd';
import GlobalContext from '../../../../../../utils/GlobalContext';
import { CloseOutlined } from '@ant-design/icons';
import PanelRight from '../../../../../common/PanelRight';
import usePanelKey from '../../../../../common/BusinessMap/usePanelKey';
export default function Detail(props) {
    const [detailItem, setDetailItem] = useState();
    const map = useBusinessMap();
    const { detailTemplate } = useContext(GlobalContext);

    const targetTemplate = detailTemplate[detailItem?.lxTitle]

    useEffect(() => {
        if (map) {
            const handler = evt => {

                const features = map.getFeaturesAtPixel(evt.pixel);
                //console.log("fenddfd",features)
                const targetFeature = features.find(f => {
                    return f.get('lxTitle')
                })
                //console.log("fenddfd",targetFeature)
                if (targetFeature) {
                    //console.log("fenddfd",targetFeature?.getProperties())
                    setDetailItem(targetFeature?.getProperties())
                }
            }
            map.on('singleclick', handler);
            const detailHandler = args => {
                //console.log("fenddfd",args)
                setDetailItem(args.item)
            }
            map.on('fxqhfx.detail', detailHandler)
            return () => {
                map.un('singleclick', handler);
                map.un('fxqhfx.detail', detailHandler)
            }

        }
    }, [map])

    useEffect(() => {
        PubSub.publish("detailItem", { detailItem: detailItem })
    }, [detailItem])

    return (detailItem && targetTemplate) ? <DarkCard style={{
        position: 'absolute',
        right: '20px',
        width: '300px',
        top: '20px',
        bottom: '20px',
        pointerEvents: 'auto',
        borderRadius: 8,
    }} className="layout-v">
        <div style={{
            fontSize: 20,
            fontWeight: "bold",
            borderBottom: "1px solid #eee",
            paddingBottom: 12,
            marginBottom: 12
        }} className='layout-h center'>
            <div className='fill w0'>{detailItem?.lxTitle || ''}详情</div>
            <div>
                <Button size="small" icon={<CloseOutlined />} style={{
                    // color: "#fff"
                    background: "#00000000"
                }} onClick={e => {
                    setDetailItem(null)
                }} />
            </div>
        </div>
        <Descriptions column={1} bordered size="small" className='fill h0' style={{
            overflow: "auto"
        }}>
            {targetTemplate.map((template, i) => {
                return <Descriptions.Item label={template.alias}>{detailItem?.[template.name]}</Descriptions.Item>
            })}
        </Descriptions>
    </DarkCard> : null;
}